<#if invalid?? && invalid>
<div class="alert alert-danger" role="alert">
	<strong>错误！</strong> 无效的合同信息！
</div>
<#else>
<style>
.form-control {
	border-color: #fff;
	box-shadow: none;
}

textarea {
	resize: none;
}
</style>

<form class="contract-payout-multiple-form">
	<table class="table table-bordered payout-plans">
		<tr>
			<th width="30"></th>
			<th class="text-center"><span class="not-null-star">*</span> 收款单位</th>
			<th class="text-center"><span class="not-null-star">*</span> 付款事项</th>
			<th class="text-center" width="105"><span class="not-null-star">*</span> 付款人</th>
			<th class="text-center" width="126"><span class="not-null-star">*</span> 付款金额（元）</th>
			<th class="text-center" width="110"><span class="not-null-star">*</span> 付款日期</th>
			<th class="text-center">备注</th>
		</tr>
		<tr class="data-row">
			<input type="hidden" name="contract.id" value="${contract.id}" />
			<input type="hidden" name="createTime" value="${.now?string('yyyy-MM-dd')}" />
			<input type="hidden" name="payout" value="false" />
			<td style="padding-bottom: 0px;" class="text-center"><a href="javascript:;" class="icon-remove text-danger remove-row" title="移除" style="margin-left: 2px;"></a></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<input type="text" class="form-control not-empty" name="moneyTo" value="${(contract.type.collection)?string('',contract.companyB)}" placeholder="最多100个汉字" />
				</div></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<textarea rows="1" class="form-control not-empty" name="reason" placeholder="最多300个中文"></textarea>
				</div></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<select class="form-control not-empty" name="header.id"> <#if header??> <#list header as h>
						<option value="${h.id}">${h.name}</option> </#list> </#if>
					</select>
				</div></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<input type="text" class="form-control not-empty number" name="total" placeholder="填写金额">
				</div></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<input type="text" class="form-control not-empty datetimepicker" data-format="yyyy-MM-dd" data-foot="false" name="payoutTime" placeholder="请选择日期" readonly="readonly">
				</div></td>
			<td style="padding: 0px;"><div class="form-group margin-0">
					<textarea rows="1" class="form-control" name="remark" placeholder="最多1000个中文"></textarea>
				</div></td>
		</tr>
		<tr class="plus-row">
			<td class="text-center"><a href="javascript:;" class="icon-plus text-primary add-row"></a></td>
			<td colspan="6" class="text-center"></td>
		</tr>
	</table>
	<div class="row">
		<div class="col-md-12 text-right">
			<div class="btn btn-primary btn-sm btn-submit">确定</div>
			&nbsp;
			<div class="btn btn-default btn-sm" onclick="Suredy.Modal.closeModal();">关闭</div>
		</div>
	</div>
</form>

<script type="text/javascript">
	require([ 'suredyModal', '${request.contextPath}/app/js/form-checker.js', 'suredyDatetimepicker', 'jqueryForm' ], function(Modal, formChecker) {
		var template = $('tr.data-row').prop('outerHTML');
		var plus = $('tr.plus-row').prop('outerHTML');

		// 文本框控制
		$('table.payout-plans').on('focus', 'textarea', function() {
			var $this = $(this);

			if ($this.attr('rows') === 5)
				return false;

			$('textarea', $this.parents('tr.data-row')).animate({
				'height' : '+=50'
			});
		});

		// 文本框控制
		$('table.payout-plans').on('blur', 'textarea', function() {
			$('textarea', $(this).parents('tr.data-row')).animate({
				'height' : '-=50'
			}, 100);
		});

		// 删除一行
		$('table.payout-plans').on('click', '.remove-row', function() {
			$(this).parents('tr').remove();
		});

		// 增加一行
		$('table.payout-plans').on('click', '.add-row', function() {
			var table = $('table.payout-plans');

			$(this).parents('tr').remove();

			table.append(template);
			table.append(plus);
		});

		$('form.contract-payout-multiple-form .btn-submit').on('click', function() {
			var form = $('form.contract-payout-multiple-form');

			// 校验表单
			if (!formChecker(form)) {
				return false;
			}

			var $this = $(this);
			var okBtn = $('form.contract-payout-multiple-form .btn-submit');

			if (okBtn.hasClass('disabled'))
				return false;

			okBtn.addClass('disabled');

			var data = {};

			var trs = $('table.payout-plans tr.data-row')

			trs.each(function(i) {
				var eles = $('[name]', $(this));

				for ( var j = 0; j < eles.length; j++) {
					var ele = eles.eq(j);
					var key = 'array[' + i + '].' + ele.attr('name');
					var val = ele.val();

					data[key] = val;
				}
			});

			form.ajaxSubmit({
				url : '${request.contextPath}/contract/payout-plan-multiple',
				type : 'post',
				data : data,
				dataType : "json",
				success : function(data, textStatus, jqXHR) {
					if (!data || !data.success) {
						var msg = (data && data.msg) || '记录付款计划信息失败!';
						alert(msg);
						okBtn.removeClass('disabled');
						return false;
					}

					Suredy.refreshContent('${contract.id}', [ 'div.suredy-tabs' ]);
					Modal.closeModal();
				},
				error : function(jqXHR, textStatus, errorThrown) {
					alert('记录付款计划信息失败!\n' + errorThrown);
					okBtn.removeClass('disabled');
					return false;
				}
			});
		});
	});
</script>
</#if>
